<template>
	<div class="GameDetailHotList">
		<div class="getHotLeagueListBox">
        <ul class="getHotLeagueList">
          <li 
            v-for='(item,index) in HotLeagueList'
            :key='index'
            :class="currentHover == index?'hover':''"
            v-show='showFun(index)'
            @click='checkLeague(item.tournament_stage_id,item.leagueName,index)'
          >
            {{ item.leagueName }}
          </li>
        </ul>
        <span 
          :class='{"ul-icon":HotLeagueListShow,"iconfont":1}' 
          @click='HotLeagueListShow =! HotLeagueListShow'
        >&#xe602;</span>
      </div>
	</div>
	
</template>
<script>
	export default{
		name:'GameDetailHotList',
		props:{
      HotLeagueList:Array,
    },
    data:function(){
      return {
        currentHover:'0',
        HotLeagueListShow:false,
      }
    },
    methods:{
      checkLeague(id,name,index){
        this.currentHover = index;
        this.$emit("checkLeagueList",{id:id,name:name})
      },
       showFun(index){
          if (index>4) {
            if (this.HotLeagueListShow) {
              return true
            }else{
              return false
            }
          }else{
            return true
          }
        },
    }
	};
</script>
<style lang="less" scoped>
	@import '~styles/varibles.less';
 .getHotLeagueListBox{
    position: fixed;
    top: 1rem;
    left: 0;
    right: 0;
    .iconfont{
      position:absolute;
      top: .15rem;
      right: .1rem;
      width: .49rem;
      background:#fff;
      font-size: .28rem;
      padding:0.1rem;
      text-align: center;
      color: @grayColor; 
    }
  }
  .getHotLeagueList{
    padding:.15rem .7rem 0rem .15rem;
    overflow: hidden;
    background:#F5F8FB;
    li{
      float: left;
      padding:.1rem;
      background: #fff;
      margin-right: .1rem;
      margin-bottom: .15rem;
      color: @grayColor;
      letter-spacing: 2px;
      min-width: 1rem;
      text-align: center;
      &.hover{
        color: #fff;
        background: @greenColor1;
        font-weight: 600;
      }
    }
  }
  .ul-icon{
    transform: rotate(180deg);
  }
    
</style>